<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="bt1">ok1</button>
		<button id="bt2">ok2</button>
	</body>
	<script>
	var bt1=document.getElementById("bt1");
	// dom0级事件
	bt1.onclick=function(){
		window.alert("你好")
	}
	bt1.onclick=function(){
		bt1.style.backgroundColor="red"
	}
	// dom2级事件
	// dom2级事件添加方式调用addEventListener方法
	// 参数1:事件类型
	// 参数2：事件监听器(function)
	var bt2=document.getElementById("bt2");
	bt2.addEventListener("click",doit)
	function doit(){
		bt2.style.backgroundColor="lightblue"
	}
	bt2.addEventListener("click",sayBye)
	function sayBye(){
		bt2.style.color="yellow"
	}
	// dom0级事件与dom2级事件的区别？
	// dom0级事件在绑定相同类型的事件时，是以覆盖的效果进行添加
	// dom2级事件在添加相同类型的事件时，设计的效果是累加效果
	// 官方说明：为元素添加多个监听器
	// DOM2级事件可以根据需要移除指定监听器
	bt2.removeEventListener("click",sayBye)
	
	
	</script>
</html>
